/* homeSub/pages/priceDetail/priceDetail.wxss */
@import "../../../commin/commin.less";

page {
    background-color: #F5F7FA;
}
.top-nav{
    width: 100%;
    position: fixed;
    z-index: 1001;
}
.head-nav {
    background-color: #fff;
    padding: 32rpx 96rpx 24rpx 90rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .fontsize(30rpx);
    font-family: PingFang SC;
    font-weight: 500;
    color: @text-color3;
    // top: 0;
    width: 564rpx;


    .activite {
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @blue;
    }

    .img2 {
        .kuangao(72rpx, 6rpx);
        position: absolute;
        margin-top: 46rpx;
        margin-left: -68rpx;
    }

    .nav {
        padding-bottom: 10rpx;
        margin: 0 24rpx;
    }

    .all {
        position: absolute;
        right: 24rpx;
        display: flex;
        .fontsize(26rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @blue;
        align-items: center;

        .allSite {
            .kuangao(14rpx, 23rpx);
            margin-left: 11rpx;
        }
    }
}
.chargingType{
    width: 100%;
    height: 120rpx;
    display: flex;
    background-color: #F5F7FA;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    .item{
        flex: 1;
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #606266;
        .num{
            font-size: 40rpx;
            font-family: DIN;
            font-weight: bold;
            color: #6DB12E;
        }
        .all{color: #303133}
        .free{color: #6DB12E}
        .charging{color: #FC724C}
        .full{color: #4096EC}
    }
}
.p-category {
    height: 100vh;
    display: flex;
    flex-direction: column;

    &-header {
        background: #fff;

        &-wrap {
            display: flex;
            align-items: center;
            padding: 20rpx 0 32rpx;
            height: 104rpx;
        }

        .icon {
            width: 48rpx;
            height: 48rpx;
            display: block;
            padding: 0 16rpx 0 32rpx;
        }

        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 56rpx;
        }
    }

    &-container {
        flex: 1;
        display: flex;
        overflow: hidden;
        .margins(230rpx, 24rpx, 0, 24rpx);
        height: calc(100% - 230rpx);
        background-color: #F5F7FA;
    }

    &-left {
        .kuan(234rpx);
        position: relative;
        z-index: 1000;
        background: #f1f6fb;
        border-radius: 16rpx 0rpx 0rpx 0rpx;
        box-shadow: 4rpx 7rpx 20rpx 0rpx rgba(166, 171, 179, 0.24);
    }

    &-menu {
        height: 100%;
        z-index: 1;

        &-item {
            .paddings(38rpx, 0, 38rpx, 0);
            text-align: center;
            border-radius: 16rpx 0rpx 0rpx 0rpx;
            background: #f1f6fb;
            transition: all 0.3s linear;
            position: relative;
            border-bottom: 1rpx solid #DCDFE6;

            &-label1 {
                .fontsize(26rpx);
                .margins(23rpx, 0, 19rpx, 0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }

            &-label2 {
                .fontsize(26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;
            }

            &-line {
                width: 8rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }

            &.active {
                background: @white-color;
                .borderradius(16rpx, 0rpx, 0rpx, 0rpx);

            }
            &.active1 {
                background: @white-color;
                .borderradius(0rpx, 0rpx, 0rpx, 0rpx);

            }
        }
    }

    &-right {
        .kuan(calc(100% - 234rpx));
        background: @white-color;
        .borderradius(0rpx, 16rpx, 16rpx, 0rpx);

        &-scroll {
            box-sizing: border-box;
        }
    }

    &-store {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 0 40rpx 32rpx;

        &-label {
            font-size: 26rpx;
            font-weight: bold;
            color: #7b8082;
            line-height: 44rpx;
            padding-right: 40rpx;
            white-space: nowrap;

            &.on {
                font-size: 30rpx;
                color: #121a1e;
            }
        }
    }

    &-first {
        .paddings(0, 32rpx, 222rpx, 24rpx);

        &-label {
            font-size: 30rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 44rpx;
            padding-bottom: 24rpx;
        }
    }

    &-second {
        .paddings(38rpx, 0rpx, 38rpx, 0px);
        border-bottom: 1rpx solid #DCDFE6;
    }
}

.label {
    display: flex;
    padding-left: 32rpx;
    align-items: center;
	justify-content: center;

    .type {
        .paddings(0rpx, 10rpx, 0rpx, 10rpx);
        .fontsize(20rpx);
        height: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        background: rgba(20, 135, 250, 0.06);
        .borders(1rpx, @blue);
        .borderradius(6rpx, 6rpx, 6rpx, 6rpx);
        color: @blue;
    }

    .type1 {
        .paddings(0rpx, 10rpx, 0rpx, 10rpx);
        .fontsize(20rpx);
        height: 32rpx;
        font-family: PingFang SC;
        font-weight: 500;
        background: rgba(20, 135, 250, 0.06);
        .borders(1rpx, @text-color4);
        .borderradius(6rpx, 6rpx, 6rpx, 6rpx);
        color: @text-color4;
    }

    .gunNo {
        .fontsize(30rpx);
        margin-left: 16rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color2;
    }
}

.disFlex {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .time {
        display: flex;
        align-items: center;

        .img {
            .kuangao(39rpx, 32rpx);
            margin-right: 14rpx
        }
    }

    .currentImg {
        .kuangao(57rpx, 33rpx);
    }
}

.money {
    color: @orange;
    .margins(15rpx, 0, 19rpx, 0);
    letter-spacing: 5rpx;

    .txt1 {
        .fontsize(22rpx);
        font-family: PingFangSC;
        font-weight: 500;
        color: #FF8A5B;
    }

    .txt2 {
        .fontsize(32rpx);
        font-family: DIN-Bold;
        font-weight: Bold;
    }

    .txt3 {
        .fontsize(30rpx);
        font-family: PingFang-SC-Medium;
        font-weight: Medium;
    }
}

.servePrice {
    .fontsize(26rpx);
    font-family: PingFangSC;
    font-weight: 400;
    color: @text-color3;
    letter-spacing: 3rpx;
}

.tips {
    text-align: center;
    .fontsize(22rpx);
    font-family: PingFang SC;
    font-weight: 400;
    color: @text-color4;
    margin-top: 20rpx;

}

.gunNo {
        .fontsize(30rpx);
        margin-left: 16rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color2;
}
.gun_name{
	font-size: 28rpx;
	margin-top: 10rpx;
	width: 92%;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.btn {
    background: @white-color;
    position: absolute;
    z-index: 999;
    margin-top: -222rpx;

    .starC {
        .kuangao(270rpx, 88rpx);
        .lineheight(88rpx);
        text-align: center;
        margin: 94rpx 99rpx 56rpx 99rpx;
        background: linear-gradient(105deg, #2B99FF, #1B8CF5);
        box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0, 110, 212, 0.3);
        border-radius: 44rpx;
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @white-color;
    }
}


.pageList{
    padding-top: 220rpx;
}

.plie_list {
    width: 638rpx;
    background: linear-gradient(0deg, #FFFFFF, #F4F6F8);
    border: 2rpx solid #FFFFFF;
    box-shadow: 4rpx 7rpx 20rpx 0px rgba(166,171,179,0.24);
    border-radius: 16rpx;
    margin: 16rpx 24rpx 16rpx 24rpx;
    padding: 44rpx 32rpx 29rpx 32rpx;
}
.plie_list .plie_item {
    display: flex;
    align-items: center;

    .img2,.img3,.img4,.img5,.img6{
        width: 100rpx;
        height: 100rpx;
        background: rgba(20, 135, 250, 0.06);
        border-radius: 50%;
        position: absolute;
        margin-left: 13rpx;
        line-height: 100rpx;
        text-align: center;
        font-size: 22rpx;
        font-family: PingFangSC;
        font-weight: 400;
        color: var(--textColor);
    }
    .img3{
        background: rgba(233,178,108,0.16);
        color: rgba(233,178,108);
    }
    .img4{
        background: rgba(109,177,46,0.16);
        color: rgba(109, 177, 46, 1);
    }
    .img5{
        background: rgba(144, 147, 153, 0.16);
        color: rgba(144, 147, 153)
    }
    .img6{
        background: rgba(121, 132, 197,0.16);
        color: rgba(121, 132, 197);
        box-sizing: border-box;
        padding-top: 20rpx;
        line-height: 30rpx;
    }
}
.plie_list .plie_item .img {
    width: 111rpx;
    height: 111rpx;
    background: #fff;
    border: 7rpx solid var(--textColor);
    opacity: 0.06;
    border-radius: 50%;
}
.plie_list .plie_item .status {
    width: 111rpx;
    height: 111rpx;
    background: #fff;
    border: 7rpx solid #909399;
    opacity: 0.06;
    border-radius: 50%;
}
.plie_list .plie_item .status3 {
    width: 100rpx;
    height: 100rpx;
    background: rgba(144, 147, 153, 0.06);
    border-radius: 50%;
    position: absolute;
    margin-left: 13rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFangSC;
    font-weight: 400;
    color: #909399;
}
.plie_list .plie_item .item {
    margin: 0 28rpx;
    flex: 1;
}
.plie_list .plie_item .item_name {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #1a1a1a;
    display: flex;
    align-items: center;
}
.plie_list .plie_item .item_name .item_type, .plie_list .plie_item .item_name .item_type2{
    display: inline-block;
    padding: 7rpx 20rpx;
    background: rgba(233,178,108,0.16);
    color: #DB9132;
    font-size: 24rpx;
    border-radius: 8rpx;
    margin-left: 15rpx;
}
.plie_list .plie_item .item_name .item_type2{
    background: rgba(109,177,46,0.16);
    color: #6DB12E;
}
.plie_list .plie_item .item_name .item_img {
    width: 51rpx;
    height: 40rpx;
    margin-left: 15rpx;
}
.plie_list .plie_item .item_info {
    margin: 30rpx 0 30rpx 0;
    font-size: 26rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: @blue;
}
.plie_list .plie_item .item_info .price {
    //color: #fc724c;
    font-size: 26rpx;
    font-weight: bold;
}
.plie_list .plie_item .nextInfo {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #909399;
}
.plie_list .turn_img {
    width: 16rpx;
    height: 27rpx;
}
.plie_list .priceDetail {
    padding-top: 30rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: var(--textColor);
}
